Page({
  data: {
    currentDate: new Date().getTime(), //获取时间戳
    houseLayerVisible: false, //报修房屋选择框
    repairLayerVisible: false, //维修项目选择框
    dateLayerVisible: false, //报修日期选择框
    // 报修房屋选项
    houseList: [],
    // 维修项目选项
    repairItem: [{ name: '水路卫浴' }, { name: '电路灯具' }, { name: '管道疏通' }, { name: '开锁换锁' }],
    attachment: [], // 报修图片,一个图片信息是一个对象
    mobile: '', //防止校验出错
    description: '',
    houseId: '',
    repairItemId: '',
  },
  onLoad({ id }) {
    this.getHouseList() //获取房屋列表
    this.getRepairItem() //获取维修项目
    // 编辑
    if (id) {
      wx.setNavigationBarTitle({
        title: '修改报修信息',
      })
      this.getRepairDetail(id)
    }
  },
  // 编辑
  async getRepairDetail(id) {
    if (!id) return
    // 请求数据接口
    const { code, data: repairDetail } = await wx.http.get('/repair/' + id)
    // 检测接口调用结果
    if (code !== 10000) return wx.utils.toast('获取报修信息失败!')
    // 渲染报修信息
    this.setData({ ...repairDetail })
  },
  // 打开选择维修房屋选择面板
  openHouseLayer() {
    this.setData({ houseLayerVisible: true })
  },
  async getHouseList() {
    // 请求数据接口
    const { code, data: houseList } = await wx.http.get('/house')
    // 检测接口返回的结果
    if (code !== 10000) return wx.utils.toast('获取房屋列表失败!')
    // 数据渲染
    this.setData({ houseList })
  },
  // 选择
  selectHouse(ev) {
    // 看文档可知ev.detail可拿到用户选项- 数据就是houseList中的一项
    // console.log(ev.detail)
    // 设置数据到data中
    this.setData({
      houseInfo: ev.detail.name,
      houseId: ev.detail.id,
    })
  },
  // 关闭选择维修房屋选择面板
  closeHouseLayer() {
    this.setData({ houseLayerVisible: false })
  },

  openRepairLayer() {
    this.setData({ repairLayerVisible: true })
  },
  async getRepairItem() {
    // 请求数据接口
    const { code, data: repairItem } = await wx.http.get('/repairItem')
    // 检测接口返回的数据
    if (code !== 10000) return wx.utils.toast('获取维修项目失败!')
    // 数据渲染
    this.setData({ repairItem })
  },
  selectRepairItem(ev) {
    // 获取用户选择的维修项目名称
    const { name: repairItemName, id: repairItemId } = ev.detail
    // 页面中渲染
    this.setData({ repairItemName, repairItemId })
  },
  closeRepairLayer() {
    this.setData({ repairLayerVisible: false })
  },

  openDateLayer() {
    this.setData({ dateLayerVisible: true })
  },
  selectDate(ev) {
    this.setData({
      dateLayerVisible: false,
      appointment: wx.utils.formatDate(ev.detail),
    })
  },
  closeDateLayer() {
    this.setData({ dateLayerVisible: false })
  },

  // 上传图片
  afterRead(ev) {
    // 1.获取图片
    // console.log(ev.detail.file.url)

    // 2.上传图片到后端
    wx.uploadFile({
      url: wx.http.baseURL + '/upload',
      filePath: ev.detail.file.url,
      name: 'file',
      header: {
        Authorization: getApp().token,
      },
      success: (res) => {
        const { code, data } = JSON.parse(res.data)
        if (code !== 10000) return wx.utils.toast('上传失败')
        // 3.设置图片到data.attachment中
        this.setData({
          attachment: [
            ...this.data.attachment,
            // 在展开的attachment中，插入一个对象，对象中填入data.url
            { url: data.url, deletable: true },
          ],
        })
      },
    })
  },
  // 删除图片
  delFile(ev) {
    const list = this.data.attachment.filter((item, index) => index !== ev.detail.index)
    this.setData({
      attachment: list,
    })
  },
  async submitForm() {
    // 逐个验证表单数据
    if (!this.verifyHouse()) return
    if (!this.verifyRepair()) return
    if (!this.verifyMobile()) return
    if (!this.verifyDate()) return
    if (!this.verifyDescription()) return
    // 参数全部收到一个对象
    const { id, houseId, repairItemId, appointment, mobile, description, attachment } = this.data
    // 发送请求
    const { code } = await wx.http.post('/repair', {
      id,
      houseId,
      repairItemId,
      appointment,
      mobile,
      description,
      attachment,
    })
    if (code !== 10000) return wx.showToast({ title: '在线报修失败!', icon: 'none' })
    // 跳转到表单列表页面 表单提交后，就不应该还能返回了（不合逻辑）
    wx.redirectTo({
      url: '/repair_pkg/pages/list/index',
    })
  },
  // 校验
  verifyHouse() {
    const valid = this.data.houseId !== ''
    // 验证结果提示
    if (!valid) wx.utils.toast('请选择房屋信息!')
    // 返回验证结果
    return valid
  },
  verifyRepair() {
    const valid = this.data.repairItemId !== ''
    // 验证结果提示
    if (!valid) wx.utils.toast('请选择维修项目!')
    // 返回验证结果
    return valid
  },
  verifyMobile() {
    // 验证手机号
    const reg = /^[1][3-8][0-9]{9}$/
    const valid = reg.test(this.data.mobile.trim())
    // 验证结果提示
    if (!valid) wx.utils.toast('请填写正确的手机号码!')
    // 返回验证结果
    return valid
  },
  verifyDate() {
    // 验证日期格式
    const reg = /^\d{4}\/\d{2}\/\d{2}$/
    const valid = reg.test(this.data.appointment)
    // 验证结果提示
    if (!valid) wx.utils.toast('请选择预约日期!')
    // 返回验证结果
    return valid
  },
  verifyDescription() {
    // 验证报修项目描述
    const valid = this.data.description.trim() !== ''
    // 验证结果提示
    if (!valid) wx.utils.toast('请填写问题描述!')
    // 返回验证结果
    return valid
  },
})
